<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="${ctxStatic}/mui/css/mui.min.css"> 
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/mui/css/app.css" />  
		
		<style>
			.chart {
				height: 150px;
				margin: 0px;
				padding: 0px;
				background-color:#FFFFFF;
				border-radius: 15px ;15px;15px; 15px;
			}
			h5 {
				background-color:#FFFFFF;
				margin-top: 30px;
				font-weight: bold;
				font-size: 20px;
			}
			h5:first-child {
				margin-top: 15px;
			}
		</style>
		<script src="${ctxStatic}/mui/js/mui.js"></script>
	</head>

	<body>
		<div class="mui-content"> 
			<div class="mui-card">
				<div class="mui-card-header">牲畜量分析</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						根据您上传的照片分析，您当前的草场可容纳<a>${map.get("NowLivestock")}</a>，误差在3天左右，本次分析结果只对当天有用，请您采纳
					</div>
				</div>
				 
			</div>
			<div class="mui-card">
				<div class="mui-card-header">草场生产力分析</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						根据您上传的照片分析，您当前草场大约有<a>${map.get("NowcarryingGrass")}</a>公斤，误差在200斤左右，可供<a>${map.get("NowLivestock")}</a>左右，本次分析结果只对当天有用，望您采纳
					</div>
				</div>
				 
			</div>
			<div class="mui-card">
				<div class="mui-card-header">年产量分析</div>
				<div class="mui-card-content">
					 
				<div class="chart" id="lineChart">
				
				</div>
				 
			</div> 
			</div>
		</div> 
		
		<script src="${ctxStatic}/mui/libs/echarts-all.js"></script>
		<script>
			var getOption = function(chartType) {
				var chartOption = {
					legend: {
						data: ['产量']
					},tooltip : {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            label: {
				                backgroundColor: '#6a7985'
				            }
				        }
				    },
					grid: {
						x: 50,
						x2: 10,
						y: 30,
						y2: 25
					},
					toolbox: {
						show: false,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: false,
					xAxis: [{
						type: 'category',
						data: ['5月', '6月', '7月', '8月', '9月', '10月']
					}],
					yAxis: [{
						type: 'value',
						splitArea: {
							show: true
						}
					}],
					series: [{
						name: '产量(公斤)',
						type: chartType,
						data: ${cl}
					}]
				};
				return chartOption;
			};
			var byId = function(id) {
				return document.getElementById(id);
			}; 
			var lineChart = echarts.init(byId('lineChart'));
			lineChart.setOption(getOption('line'));  
		</script>
	</body>

</html>